---
section: Interactivity
title: User Select
slug: /docs/user-select/
---

# User Select

Utilities for controlling whether the user can select text in an element.

<carbon-ad />

| React props            | CSS Properties            |
| ---------------------- | ------------------------- |
| `userSelect={keyword}` | `user-select: {keyword};` |

## Disable selecting text

Use `userSelect="none"` to prevent selecting text in an element and its children.

```jsx preview color=amber
<>
  <template preview>
    <x.div
      mx="auto"
      maxWidth="sm"
      bg="amber-200"
      p={2}
      userSelect="none"
      textAlign="center"
      color="gray-500"
    >
      This text is not selectable
    </x.div>
  </template>
  <x.div userSelect="none">This text is not selectable</x.div>
</>
```

## Allow selecting text

Use `userSelect="text"` to allow selecting text in an element and its children.

```jsx preview color=emerald
<>
  <template preview>
    <x.div
      mx="auto"
      maxWidth="sm"
      bg="emerald-200"
      p={2}
      userSelect="text"
      textAlign="center"
      color="gray-500"
    >
      This text is selectable
    </x.div>
  </template>
  <x.div userSelect="text">This text is selectable</x.div>
</>
```

## Select all text in one click

Use `userSelect="all"` to automatically select all the text in an element when a user clicks.

```jsx preview color=fuchsia
<>
  <template preview>
    <x.div
      mx="auto"
      maxWidth="sm"
      bg="fuchsia-200"
      p={2}
      userSelect="all"
      textAlign="center"
      color="gray-500"
    >
      Click anywhere in this text to select it all
    </x.div>
  </template>
  <x.div userSelect="all">Click anywhere in this text to select it all</x.div>
</>
```

## Auto

Use `userSelect="auto"` to use the default browser behavior for selecting text. Useful for undoing other utility like `userSelect="none"` at different breakpoints.

```jsx preview color=light-blue
<>
  <template preview>
    <x.div
      mx="auto"
      maxWidth="sm"
      bg="light-blue-200"
      p={2}
      userSelect="auto"
      textAlign="center"
      color="gray-500"
    >
      This text is selectable
    </x.div>
  </template>
  <x.div userSelect="auto">This text is selectable</x.div>
</>
```

## Responsive

To control user text selection at a specific breakpoint, use responsive object notation. For example, adding the property `userSelect={{ md: "none" }}` to an element would apply the `userSelect="none"` utility at medium screen sizes and above.

```jsx
<x.div userSelect={{ md: 'none' }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
